<template>
	<div class="order-page">
		<van-nav-bar
		  title="下单"
			left-text="返回"
			 @click-left="handleLeftClick"
		/>
		<van-cell-group>
			<van-collapse accordion v-model="activeNames">
			  <van-collapse-item v-for="(item,index) in formList"
				 :name="index+1"
				 :key="item.id">
				 <template v-slot:title>
					 <div>
						 <van-tag type="primary">商品{{index+1}}</van-tag>
						 :{{item.goodsName}},
						 <van-tag type="danger">价格</van-tag>
						 :{{item.goodsPrice*item.goodsDiscount/10*item.buyCount}} 
						</div>
				 </template>
				 <van-cell title="商品名称" :value="item.goodsName" />
				 <van-cell title="商品原价" :value="item.goodsPrice" />
				 <van-cell title="商品折扣" :value="item.goodsDiscount" />
				 <van-cell title="商品库存" :value="item.goodsCount" />
				 <van-cell title="商品描述" :value="item.goodsDescription" />
				 <van-cell title="购买数量" :value="item.buyCount" />
				 <van-cell title="总价" :value="item.goodsPrice*item.goodsDiscount/10*item.buyCount" />
				</van-collapse-item>
			 
			</van-collapse>
		 
			<van-cell v-if="hasAddress" 
				title="收货地址" 
				is-link
				to="/user-address"
				:value="getAddressStr"/>
			<van-cell v-else title="收货地址" 
				is-link  value="点击设置"
				 to="/user-address"/>
			</van-cell>
			<van-field
			  v-model="remark"
			  rows="2"
			  autosize
			  label="备注"
			  type="textarea"
			  maxlength="50"
			  placeholder="请输入留言"
			  show-word-limit
			/>
		</van-cell-group>
		<van-submit-bar
		  
		  :price="getTotalPrice"
		  button-text="提交订单"
		  @submit="handleShowPassword"
		/>
		<van-dialog v-model="show" 
			title="支付密码" 
			show-cancel-button
			@confirm="onSubmit">
		  <van-field v-model="password" type="password" placeholder="请输入密码" />
		</van-dialog>
	</div>
</template>

<script>
	import {getAddressListForPage} from '@/api/address-api.js'
	import {insertOrderFromBuyCar} from '@/api/order-api.js'
	export default{
		computed:{
			getAddressStr(){
				return this.addressInfo.province+
					this.addressInfo.city+
					this.addressInfo.area+
					this.addressInfo.address
			},
			getTotalPrice(){
				if(this.formList.length == 0){
					return 0
				}
				if(this.formList.length == 1){
					let item = this.formList[0]
					let thisPrice = item.goodsPrice*item.goodsDiscount/10*item.buyCount
					return thisPrice*100
				}
				let totalPrice = this.formList.reduce((last,item,index,list)=>{
					let thisPrice = item.goodsPrice*item.goodsDiscount/10*item.buyCount
					if(index == 1){
						let lastPrice = last.goodsPrice*last.goodsDiscount/10*last.buyCount
						return lastPrice+thisPrice
					}else{
						return last+thisPrice
					}
				})
				
				return totalPrice*100
			}
		},
		methods:{
			handleLeftClick(){
				this.$router.history.go(-1)
			},
			
			async getAddressListForPage(){
				let res = await getAddressListForPage({pno:1,psize:10})
				if(res.data.code == 200){
					let list = res.data.data.list;
					if(list.length == 0){
						this.hasAddress = false
					}else if(list[0].isDefault != 1){
						this.hasAddress = false
					}else{
						this.hasAddress = true
						this.addressInfo = list[0]
					}
					
				}
			},
			handleShowPassword(){
				if(this.hasAddress ==false){
					this.$notify({type:'danger',message:'您还没有选择收货地址'})
					return
				}
				this.show = true
			},
			async onSubmit(){
				let formList = this.formList;
				let addressInfo = this.addressInfo;
				formList = formList.map(formData => {
					return {
						...addressInfo,
						goodsId:formData.goodsId,
						type:2,
						buyCarId:formData.id,
						addressId:addressInfo.id,
						count:formData.buyCount,
						pay:formData.goodsPrice*formData.goodsDiscount/10*formData.buyCount,
						remark:this.remark,
						goodsName:formData.goodsName,
						goodsPrice:formData.goodsPrice,
						goodsDiscount:formData.goodsDiscount
					}
				})
				let data = {
					password:this.password,
					orders:formList
				}
				console.log(data)
				let res = await insertOrderFromBuyCar(data)
				if(res.data.code == 200){
					this.$notify({type:'success',message:res.data.msg})
					this.$router.history.go(-1)
				}
			}
		},
		data(){
			return {
				formData:{},
				formList:[],
				addressInfo:{},
				hasAddress:false,
				show:false,
				activeNames:[1],
				remark:'',
				password:''
			}
		},
		async created(){
			await this.getAddressListForPage()
			let formList = this.$route.params.formList;
			console.log(formList)
			if(formList == undefined){
				formList = JSON.parse(sessionStorage.orderData2)
			}
			sessionStorage.orderData2 = JSON.stringify(formList)
			this.formList = formList
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.order-page{
		padding-bottom: 50px;
	}
	.num{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-weight: bold;
		.btns{
			line-height: 12px;
			height: 14px;
		}
	}
</style>
